import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

import Home from './src/home';
import Basic from './src/basic';
import Usage from './src/usage';
import Ease from './src/ease';
import Callback from './src/callback';
import Stagger from './src/stagger';
import Line from './src/line';
import AnimateControl from './src/animateControl';
import Repeat from './src/repeat';

class App extends Component {
  route = () => {
    return (
      <Router>
        <div className="row" style={{ marginTop: '30px' }}>
          <ul className="col-md-2 nav nav-pills nav-stacked">
            <li>
              <Link to="/">简介</Link>
            </li>
            <li>
              <Link to="/basic">引入方法</Link>
            </li>
            <li>
              <Link to="/usage">使用方法</Link>
            </li>
            <li>
              <Link to="/ease">缓动曲线</Link>
            </li>
            <li>
              <Link to="/callback">回调函数</Link>
            </li>
            <li>
              <Link to="/stagger">多个对象操作</Link>
            </li>
            <li>
              <Link to="/repeat">重复动画</Link>
            </li>
            <li>
              <Link to="/line">链式动画</Link>
            </li>
            <li>
              <Link to="/animateControl">动画控制</Link>
            </li>
          </ul>
          <div className="col-md-10">
            <Route exact path="/" component={Home} />
            <Route path="/basic" component={Basic} />
            <Route path="/usage" component={Usage} />
            <Route path="/ease" component={Ease} />
            <Route path="/callback" component={Callback} />
            <Route path="/stagger" component={Stagger} />
            <Route path="/repeat" component={Repeat} />
            <Route path="/line" component={Line} />
            <Route path="/animateControl" component={AnimateControl} />
          </div>
        </div>
      </Router>
    );
  }
  render() {
    return (
      <div className="container">
        {this.route()}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));